<template>
    <div id="list">
        <div class="container">
            <div class="left">
                <div class="left_list" v-for="item in navList" :key="item.id">
                    {{ item.name }}
                </div>
                
            </div>
            <div class="right">
                <div class="art_list">
                    <div class="area">[地区]</div>
                    <div class="title">这里是咨询标题</div>
                    <div class="num">10000人浏览</div>
                    <div class="time">2020-02-10</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                navList: []
            }
        },
        mounted () {
            this.getNavList();
        },
        methods: {
            async getNavList() {
                this.navList = []
                let arr = []
                let list =  []
                let res = await this.$axios.post("/port/index/ernav", { key: this.$key })
                // console.log(res);
                let code = res.data.code
                if (code == 200) {
                    arr = res.data.data
                    console.log(arr);
                    
                    for (let i = 0; i < arr.length; i++) {
                        if(arr[i].children && arr[i].children.length) {
                            this.navList = list.concat(arr[i].children)
                            console.log(this.navList);
                            
                        }
                    }
                    
                    
                }
                
            }
        },
    }
</script>

<style lang="scss" scoped>
#list {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding-top: 30px;
    .container {
        width: 1200px;
        margin: 0 auto;
        padding: 20px 0;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        .left {
            width: 200px;
            background-color: #fff;
            .left_list {
                width: 100%;
                height: 50px;
                line-height: 50px;
                text-align: center;
                border-bottom: 1px solid #f2f2f2;;
            }
        }
        .right {
            width: 880px;
            background-color: #fff;
            box-sizing: border-box;
            padding: 20px;
            .art_list {
                display: flex;
                align-items: center;
                .area {
                    color: red;
                }
                .title {
                    width: 570px;
                }
                .num {
                    width: 120px;
                    color: #aaa;
                }
                .time {
                    flex:1;
                    text-align: center;
                    color: #aaa;
                }
            }
        }
    }
}
</style>